import React, { Component } from 'react';
import { Context, UseContext } from '../Context'
import ConsumerPage from './ConsumerPage';
import ContextTypePage from './ContextTypePage';
import UseContextPage from './UseContextPage';

class ContextPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      theme: {themeColor: "red"},
      user: 'xiaoming'
    }
  }

  render() {
    const { theme, user } = this.state
     return (
      <div>
        <h3 onClick={() => this.setState({theme: {themeColor: "blue"}})}>ContextPage</h3>
        <Context.Provider value={theme}>
          <UseContext.Provider value={user}>
            <ContextTypePage />
            <UseContextPage />
            <ConsumerPage />
          </UseContext.Provider>
        </Context.Provider>
      </div>
    )
  }
}

export default ContextPage

// 如何使用Context
// step1: 创建一个context对象
// step2: 创建Provider
// step3: 子组件消费value 三种方法 contextType useContext Consumer

// 区别
// contextType 只能用在类组件 只能订阅单一的Context对象
// useContext 函数组件 自定hook 可以接受多个Context对象
// Consumer 可以同时使用在函数式组件和类组件中 可以接受多个Context对象